<template>

  <div class="login-container">


    <div class="login-weaper animated bounceInDown" style="z-index:100">
      <div class="login-left">
        <div class="login-time">
          <!-- {{time}} -->
        </div>
        <p class="title" style="font-size: 44px;color: #ffc700;">{{'大庆师范干部考评系统'}}</p>
      <el-image src="/static/img/dqsy.jpg">
      </el-image>
      </div>
      <div class="login-border">
        <div class="login-main">
          <span v-if="!state">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>投票须知</span>
              </div>
              <div class="text item">
                {{'请将投票号输入开始投票。'}}
              </div>
              <div class="text item">
                {{'所有项目必须全部选择后才能提交。'}}
              </div>
              <div class="text item">
                {{'投票结束后，请尽快撤离投票现场，不得逗留。'}}
              </div>
              <div class="text item">
                {{'投票操作过程中如有疑问，请举手示意工作人员。'}}
              </div>
            </el-card>
            <h5 class="login-title">
             请输入投票码
            </h5>
              <el-form size="big" ref="inputForm" :model="inputForm" :rules="rules" class="login-form"  @keyup.enter.native="login()" @submit.native.prevent>
                <el-form-item  prop="username" >
                  <el-input ref="userTicket" type="text" placeholder="请输入账号" v-model="inputForm.username">
                     <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
                  </el-input>
                </el-form-item>
                <!-- <el-form-item prop="password">
                  <el-input type="password" placeholder="请输入密码" v-model="inputForm.password">
                     <i slot="prefix" class="el-input__icon el-icon-female"></i>
                  </el-input>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary" :loading="loading" class="login-submit" @click="login">开始投票</el-button>
                </el-form-item>
                </el-form>
          </span>
          <span v-if="state">
            <h5 class="login-title">
             登录
            </h5>
              <el-form size="big" ref="inputForm" :model="inputForm" :rules="rules" class="login-form"  @keyup.enter.native="login()" @submit.native.prevent>

                <el-form-item  prop="username" >
                  <el-input ref="user"  type="text" placeholder="请输入账号" v-model="inputForm.username">
                     <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input ref="pass" type="password" placeholder="请输入密码" v-model="inputForm.password">
                     <i slot="prefix" class="el-input__icon el-icon-female"></i>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :loading="loading" class="login-submit" @click="login">登录</el-button>
                </el-form-item>
                </el-form>
          </span>
              <!-- <el-form-item>
              <div class="block">

                <el-image class="mobile" src="/static/img/mobile.png"></el-image>
                  <span class="demonstration">H5</span>
              </div>
                  <div class="block">

                <el-image class="mobile" src="/static/img/mobile.png"></el-image>
                  <span class="demonstration">Android</span>
              </div>
                  <div class="block">

                <el-image class="mobile" src="/static/img/mobile.png"></el-image>
                 <span class="demonstration">IOS</span>
              </div>
              </el-form-item> -->
        </div>
         <el-image class="right" src="/static/img/right.png"></el-image>


      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        time: '',
        logo: '',
        productName: '',
        loading: false,
        inputForm: {
          username: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        state: false,
        loginName: '管理员登录',
        rules: {
          username: [
            {required: true, message: '帐号不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        },
        captchaPath: ''
      }
    },
    created () {
      this.watchKeyDown()
      this.getTime()
      setInterval(() => {
        this.getTime()
      }, 1000)
    },
    mounted () {
      this.$http.get('/sys/sysConfig/getConfig').then(({data}) => {
        // this.logo = data.config.logo
        this.productName = data.config.productName
      })
    },
    methods: {
      // 切换界面
      watchKeyDown () {
        var that = this
        this.focusEvent('user')
        this.focusEvent('userTicket')
        document.onkeydown = function (ev) {
          if (ev.ctrlKey && ev.keyCode === 32) {
            that.state = !that.state
            that.inputForm.username = ''
            if (that.state) {
              that.inputForm.password = ''
              that.focusEvent('user')
            } else {
              that.focusEvent('userTicket')
            }
          } else if (ev.keyCode === 38 && that.state) {
              that.focusEvent('user')
          } else if (ev.keyCode === 40 && that.state) {
            that.focusEvent('pass')
          }
        }
      },
      // 监听聚焦
      focusEvent (name) {
        this.$nextTick((x) => {
           this.$refs[name].focus()
        })
      },
      // 提交表单
      login () {
        this.$cookie.token = ''
        this.$cookie.refreshToken = ''
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (!this.state) {
              this.inputForm.password = '0'
            }
            this.$http({
              url: '/sys/login',
              method: 'post',
              data: {
                'userName': this.inputForm.username,
                'password': this.inputForm.password
              }
            }).then(({data}) => {
              if (data && data.success) {
                this.$cookie.set('token', data.token)
                this.$cookie.set('refreshToken', data.refreshToken)
                localStorage.setItem('loginName', this.inputForm.username)
                if (data.isTime === 'no') {
                  this.$confirm("<div style='font-size: 25px'>考核未开始，请联系管理员咨询考核时间！</div>", {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: false,
                    center: true,
                    showClose: false
                  })
                  this.loading = false
                } else if (data.isWrite === 'yes') {
                  this.$confirm("<div style='font-size: 25px'>您已填写过考核表单！</div>", {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: false,
                    center: true,
                    showClose: false
                  })
                  this.loading = false
                } else {
                  localStorage.setItem('checkTime', data.checkTime)
                  this.$router.replace({name: 'home'})
                  this.loading = false
                }
              } else {
                this.loading = false
                // this.getCaptcha()
              }
            })
          }
        })
      },
      getTime () {
        this.time = this.moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      },
      // 获取验证码
      getCaptcha () {
        this.captchaPath = this.$http.BASE_URL + `/captcha.jpg`
      }
    }
  }
</script>

<style lang="scss">
@import '~@/assets/scss/login.scss';
.text {
    font-size: 12px;
}
.item {
    margin-bottom: 12px;
}
.clearfix:after {
  clear: both
}
.login-title {
  font-size: 30px;
}
.clearfix {
  text-align: center;
  font-size: 24px;
}
</style>
